<template>
    <div style="height: 100%; overflow: hidden">
        <el-container style="height: 100%">
            <el-header style="padding: 0px; height: 50px">
                <TitleBar ref="titlebar"> </TitleBar>
            </el-header>
            <el-container style="height: calc(100% - 50px)">
                <el-aside style="padding: 0px; width: 64px; height: 100%">
                    <NavBar :_current_panel="_current_panel" @select-panel="onSelectPanel"></NavBar>
                </el-aside>
                <MapTiles v-if="_current_panel == 'home_panel'" ref="map_tiles"></MapTiles>
                <Captures v-if="_current_panel == 'capture_panel'" ref="captures"></Captures>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';
import MapTiles from '@/components/MainWnd/MapTiles.vue';
import Captures from '@/components/MainWnd/Captures.vue';
import TitleBar from '@/components/MainWnd/TitleBar.vue';
import NavBar from '@/components/MainWnd/NavBar.vue';
const { proxy } = getCurrentInstance();

// 定义当前展示的panel
const _current_panel = ref('home_panel');
async function onSelectPanel(panel) {
    _current_panel.value = panel;
}

// 服务器返回的消息
async function onWsMessage(message) {
    // console.log('MainWnd::onWsMessage message = ', message);
    if (proxy.$refs.map_tiles) {
        proxy.$refs.map_tiles.onWsMessage(message);
    }
    if (proxy.$refs.captures) {
        proxy.$refs.captures.onWsMessage(message);
    }
}

defineExpose({ onWsMessage });

</script>

<style scoped>
.el-header {
    height: 50px;
}

.el-aside {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: unset;
}

.remote-sidebar {
    padding: 0px;
    width: 200px;
    height: 100%;
    overflow: hidden;
}

.captures-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>